<template>
    <el-card class="box-card">
        <div slot="header" class="clearfix">
            <el-form :inline="true" :model="formSearchData" class="d-flex" size="small">
                <el-form-item label="">
                    <el-input v-model="formSearchData.keyword" placeholder="名称"></el-input>
                </el-form-item>
                <el-form-item label="">
                    <el-select v-model="formSearchData.status" placeholder="状态">
                        <el-option
                            v-for="item in statusOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>


                <el-form-item>
                    <el-button type="primary" @click="search">搜索</el-button>
                </el-form-item>
            </el-form>

        </div>

        <el-table
            :data="dataEntities"
            style="width: 100%">
            <el-table-column
                type="index"
                width="40">
            </el-table-column>
            <el-table-column
                prop="name"
                label="登录应用"
                width="300">
                <template slot-scope="scope">
                    <el-alert
                        class="m-0 p-0"
                        show-icon
                        :title="scope.row.status_name"
                        :type="('1'==scope.row.status ? 'success' :'error')"
                        :closable="false">
                        <div><b>名称:</b> {{scope.row.name||''}}</div>
                        <div><b>域名:</b> {{scope.row.domain||''}}</div>
                    </el-alert>

                </template>
            </el-table-column>
            <el-table-column
                prop="logo_file_thumb"
                label="LOGO"
                width="">
                <template slot-scope="scope">
                <div v-if="scope.row.logo_file_thumb" >
                    <img width="100px" :src="scope.row.logo_file_thumb" :src-org="scope.row.flogo_file_url||''"/>
                </div>
                </template>
            </el-table-column>
            <el-table-column
                prop="secret"
                label="SECRET"
                width="">
            </el-table-column>
            <el-table-column
                label="回调地址"
                width="">
                <template slot-scope="scope">
                    <div v-for="(url,index) in (scope.row.return_url||[])">{{url}}</div>

                </template>
            </el-table-column>

            <el-table-column
                label="时间/状态">
                <template slot-scope="scope">
                    <div><b>S:</b> {{scope.row.status_name||''}}</div>
                    <div><b>C:</b> {{scope.row.created_at||''}}</div>
                    <div><b>U:</b> {{scope.row.updated_at||''}}</div>
                </template>
            </el-table-column>


            <el-table-column
                fixed="right"
                label="操作">
                <template slot-scope="scope">
                    <el-link type="primary" :href="scope.row.edit_link">查看/编辑</el-link>
                    <el-button type="text" size="mini" class="text-black-50" @click="deleteItem(scope.row)">删除</el-button>
                </template>

            </el-table-column>

        </el-table>

        <div class="d-flex justify-content-end" >
            <div class="pager" v-html="dataPager">

            </div>
        </div>

    </el-card>
</template>

<script>


    export default {
        components: {},
        props: {
            dataEntities: {
                type: Array,
                default: []
            },
            dataSearch: {
                type: Object,
                default: {}
            },
            dataPager: {
                type: String,
                default: ''
            },
            statusOptions: {
                type: Array,
                default: []
            },

        },
        data() {
            return {
                formLabelWidth: window.formLabelWidth,
                formData: {},
                formErrors: {},
                formSearchData: {},
            }
        },
        created() {
            this.formSearchData = this.dataSearch;
            //console.log(this);
        },
        mounted() {
            let _this = this;

        },
        methods: {

            deleteItem: function (item) {
                let _this = this;
                let entity_id = LeUtils.valueGet(item,'id','')

                if(!entity_id){
                    _this.$message.error('数据有误')
                }

                this.$confirm('删除是很危险的操作，删除后不可恢复，您确定要删除？', '警告！', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$confirm('删除是很危险的操作，删除后不可恢复，您确定要删除？', '再次警告！', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        //console.log(item)
                        _this.$apiRequest('api.firewalls.delete', {id:entity_id}).then(function (res_data) {
                            _this.$message.success('删除成功')
                            window.location.reload();
                        }).catch(function (error) {
                            _this.$message.error('删除失败')
                        })
                    })
                })




            },

            search:function () {
                this.formSearchData.pager_page = ''
                window.location.href = this.$buildUrl(window.location.href,this.formSearchData);
            }
        }
    }
</script>
